<!--
 * @Description: 常用的属性
 * @Author: rendc
 * @Date: 2025-05-08 09:19:16
 * @LastEditors: rendc
 * @LastEditTime: 2025-05-08 10:14:03
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用的属性</title>
</head>
<style>
  /* 清除默认样式 */
  html,body{
    margin: 0;
    padding: 0;
  }
  #main{
    /* background-color: black; */
    /* 整体的实际高度 100vh + 2px */
    border: 1px solid red;
    /* calc中运算符两边一定要加空格 */
    height: calc(100vh - 2px);
  }
  #div1,#div2,#div3{
    color: white;
    display: inline-block;
    width: 30%;
    height: 30%;
  }
  #div1{
    background-color: red;
    /* width: 100px; */
    /* font-size: 60px; */
    /* overflow: auto; */
    /* overflow-x: scroll ; */
    /* overflow-y: ; */
  }
  #div2{
    background-color: greenyellow;
    /* 隐藏元素 - 不占空间 */
    /* display: none;  */
    /* 隐藏元素 - 占用空间 */
    /* visibility:hidden; */
    /* 隐藏元素 - 占用空间 - 透明度*/
    /* opacity:0; */
  }
  #div3{
    background-color: skyblue;
  }
</style>
<body>
  <div id="main">
    <div id="div1" >
     div1-1
    </div>
    <div id="div2">
      div2
    </div>
    <div id="div3">
      div3
    </div>
  </div>
</body>
</html>